<template>
	<view class="question">
		<MyHaeder :isBack="false" title="面试题"></MyHaeder>
		<view class="question-content">
			<view class="question-header">
				<input type="text" value="" placeholder="请输入搜索的关键字" />
				<image class="question-search" src="../../static/imgs/search.png" mode=""></image>
			</view>
			<scroll-view scroll-y="true" :style="'height:'+clientHeight+'rpx;'">
				<view class="commidty" :style="'height:'+clientHeight+'rpx;'">
					<!-- 面试题板块 -->
					<Question :dataList='dataList'></Question>
				</view>
			</scroll-view>
		</view>
		<MyTabbar :selected="selected"></MyTabbar>
	</view>
</template>

<script>
	import MyHaeder from '../../Common/My-header/my-header.vue'
	import MyTabbar from '../../Common/Tabbar/My-Tabbar.vue'
	import Question from '../../Component/question/question-commidty.vue'
	import { questionsList } from '../../Service/question.js'
	export default{
		data(){
			return{
				selected:1,
				clientHeight:null,
				pageSize:10,
				pageNum:1,
				questionsList:[],
				dataList:[]
			}
		},
		onLoad() {
			this.__init()
		},
		methods:{
			async __init(){
				const data = {
					pageSize :this.pageSize,
					pageNum:this.pageNum
				}
				this.questionsList = await questionsList(data)
				// console.log(this.questionsList)
				this.dataList = this.questionsList
			},
		},
		onReady() {
			uni.getSystemInfo({
				success : (res)=> {
					// 获取头部的高度,获取页面节点
					let info = uni.createSelectorQuery().in(this).select('.question-header')
					//获取元素节点位置信息
					info.boundingClientRect((data)=>{
						//data包含元素高度宽度的信息 68是tabbar的高度
						this.clintHeight = res.windowHeight - data.height - 68 - 60
						console.log(data)
					}).exec(function(res){
						//这个方法必须执行，不然获取不到数据的信息
					})
				}
			})
		},
		components:{
			MyTabbar,
			MyHaeder,
			Question
		}
	}
</script>

<style scoped>
	scroll-view::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		background: transparent;
		color: transparent;
	}
	.question{
		width: 100vw;
		height: 100%;
		/* background: url(../../static/imgs/4.jpg); */
		background-color: #C0C0C0;
		background-size: cover;
		margin-top: 140rpx;
		padding-bottom:140rpx ;
	}
	.question-content{
		padding: 0 35rpx;
	}
	.question-header{
		width: 680rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 45rpx;
		position: relative;
	}
	.question input{
		width: 680rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
	}
	.question-search{
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}
</style>
